import './Update.scss'
import NavBarAgain from '../components/NavBarAgain'
import { ImageUploader, Input, Toast } from 'antd-mobile'
import ButtonAgain from '../components/ButtonAgain'
import { connect } from 'react-redux'
import action from '../store/action'
import { useState } from 'react'
import api from '../api'
function Update(props) {
    let { info, queryUserInfoAsync, navigate } = props
    //定义状态
    let [pic, setPic] = useState([{ url: info.pic }]),
        [username, setUserName] = useState(info.name)

    //图片上传
    const limitImage = (file) => {
        let limit = 1024 * 1024
        if (file.size > limit) {
            Toast.show({
                icon: 'fail',
                content: '图片不能超过1MB'
            })
            return null
        }
        return file
    }
    const uploadImage = async (file) => {
        let temp
        try {
            let { code, pic } = await api.upload(file)
            if (+code !== 0) {
                Toast.show({
                    icon: 'fail',
                    content: '上传失败'
                })
                return
            }
            temp = pic
            setPic([{ url: pic }])
        } catch (_) { }
        return { url: temp }
    }
    //提交信息
    const submit = async () => {
        //表单校验
        if (pic.length === 0) {
            Toast.show({
                icon: 'fail',
                content: '请先上传照片'
            })
            return
        }
        if (username.trim() === '') {
            Toast.show({
                icon: 'fail',
                content: '请先输入账号'
            })
            return
        }
        let [{ url }] = pic
        try {
            let { code } = await api.userUpdate(username.trim(), url)
            if (+code !== 0) {
                Toast.show({
                    icon: 'fail',
                    content: '更新失败'
                })
                return
            }
            Toast.show({
                icon: 'sucess',
                content: '更新成功'
            })
            queryUserInfoAsync();//更新数据
            navigate(-1)
        } catch (_) { }
    }
    return <div className="update-box">
        <NavBarAgain title='修改信息' />
        <div className="formBox">
            <div className="item">
                <div className="label">头像</div>
                <div className="input">
                    <ImageUploader beforeUpload={limitImage} upload={uploadImage} maxCount={1} onDelete={() => {
                        setPic([])
                    }} value={pic} />
                </div>
            </div>
            <div className="item">
                <div className="label">姓名</div>
                <div className="input">
                    <Input placeholder='请输入账号名称' value={username} onChange={(value) => {
                        setUserName(value)
                    }} />
                </div>
            </div>
            <ButtonAgain color="primary" className='submit' onClick={submit}>
                提交
            </ButtonAgain>
        </div>
    </div>
}
export default connect(state => state.base, action.base)(Update) 